<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机登入界面</title>
  <style>
    #phoneBox {
      width: 350px;
      height: 700px;
      background-color: #FFFFFF;
      border-radius: 30px;
      box-shadow: 0px 0px 10px #DDDDDD;
      overflow: hidden;
      margin: 0 auto;
      position: relative;
    }

    #shade {
      height: 1000px;
      width: 1000px;
      border-radius: 900px;
      position: absolute;
      z-index: 2;
      top: -210px;
      left: -210px;
      background-color: #ff938f;
    }

    #bg {
      position: relative;
    }

    .bgImg {
      width: 450px;
      position: absolute;
      left: 0;
      top: 0;
    }

    #interface {
      position: absolute;
      top: -50px;
      opacity: 0;
      z-index: 2;
      height: 640px;
      width: 310px;
      /* background-color: blueviolet; */
      margin: 20px;
      overflow: hidden;
    }

    #back {
      height: 100px;
    }

    #welcome {
      margin-top: 50px;
      font-size: 22px;
      color: #FFFFFF;
      letter-spacing: 1px;
      font-weight: 900;
    }

    #inputBox {
      margin-top: 120px;
    }

    #inputBox p {
      color: #7a7a7a;
    }

    .input {
      height: 26px;
      width: 302px;
      font-size: 16px;
      border: 0;
      border-bottom: 2px #aaaaaa solid;
      outline: none;
      background-color: transparent;
      opacity: 0.2;
    }

    #password {
      letter-spacing: 3px;
    }

    #input1 {
      position: relative;
    }

    #userText {
      position: absolute;
      font-weight: 900;
      top: -20px;
      z-index: -1;
    }

    #input2 {
      margin-top: 60px;
      position: relative;
    }

    #pwdText {
      position: absolute;
      font-weight: 900;
      top: -20px;
      z-index: -1;
    }

    #login {
      line-height: 70px;
      margin-top: 40px;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 1px;
    }

    #loginBtn {
      height: 70px;
      width: 70px;
      border-radius: 70px;
      background-color: #7B4970;
      float: right;
      text-align: center;
      color: #FFFFFF;
      font-size: 24px;
      cursor: pointer;
    }

    #bottom {
      height: 30px;
      margin-top: 50px;
    }

    #bottom a {
      width: 50%;
      float: left;
      font-weight: 900;
      color: #3a3a3a;
    }
  </style>
</head>

<body>
  <div id="phoneBox">
    <div id="shade"></div>
    <div id="bg">
      <img src="./bg3.png" class="bgImg" alt="" id="bg1">
      <img src="./bg2.png" class="bgImg" alt="" id="bg2">
      <img src="./bg1.png" class="bgImg" alt="" id="bg3">
    </div>
    <div id="interface">
      <div id="back"></div>
      <div id="welcome">
        Welcome<br>
        Back
      </div>
      <div id="inputBox">
        <div id="input1">
          <p id="userText">Email</p>
          <input type="text" name="" class="input" id="user">
        </div>
        <div id="input2">
          <p id="pwdText">Password</p>
          <input type="password" name="" class="input" id="password">
        </div>
      </div>
      <div id="login">
        Sign in
        <div id="loginBtn">
          →
        </div>
      </div>
      <div id="bottom">
        <a href="javaSpcript:void(0)">Sign up</a>
        <a href="javaSpcript:void(0)" style="text-align: right;">Forgot Password</a>
      </div>
    </div>
  </div>
  <script>
    function GetStyle(window) { };
    GetStyle.prototype.Style = function (ele, attr) {
      return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] : ele.currentStyle[attr] || 0;
    };
    window.getStyle = new GetStyle();
    function Animate() { };
    Animate.prototype.changeSpeedAnimate = function (ele, json, fn) {
      clearInterval(ele.timeId);
      ele.timeId = setInterval(function () {
        var flag = true;
        for (attr in json) {
          var current = parseInt(getStyle.Style(ele, attr));
          var target = json[attr];
          if (attr == "opacity") {
            var target = json[attr] * 100;
            var current = getStyle.Style(ele, attr) * 100;
            var step = (target - current) / 13;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            ele.style[attr] = current / 100;
          }
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;
          ele.style[attr] = current + "px";
          if (current != target) {
            flag = false;
          }
        }
        if (flag) {
          clearInterval(ele.timeId);
          if (fn) {
            fn();
          }
        }
      }, 20);
    }
    window.animate = new Animate();
    function id$(idName) {
      return document.getElementById(idName);
    }
    function class$(className) {
      return document.getElementsByClassName(className);
    }
    var user = id$("user");
    var password = id$("password");
    var shade = id$("shade");
    var userText = id$("userText");
    var pwdText = id$("pwdText");
    var interface = id$("interface");
    var loginBtn = id$("loginBtn");
    var bgImg = class$("bgImg");
    window.onload = function () {
      var animate1 = { "height": 260, "width": 260, "borderRadius": 400 };
      animate.changeSpeedAnimate(shade, animate1);
      shadeTime = setTimeout(function () {
        for (var i = 0; i < bgImg.length; i++) {
          animate.changeSpeedAnimate(bgImg[i], { "width": 350 });
        };
        var animate2 = { "top": -10, "opacity": 1 };
        animate.changeSpeedAnimate(interface, animate2);
      }, 30)
    };
    user.onclick =  function () {
      animate.changeSpeedAnimate(userText, { "top": -40 });
      animate.changeSpeedAnimate(user, { "opacity": 1 });
    };
    user.onblur = function () {
      if (this.value == "") {
        animate.changeSpeedAnimate(userText, { "top": -20 });
        animate.changeSpeedAnimate(this, { "opacity": 0.2 });
      }
    };
    password.onclick = function () {
      animate.changeSpeedAnimate(pwdText, { "top": -40 });
      animate.changeSpeedAnimate(this, { "opacity": 1 });
    };
    password.onblur = function () {
      if (this.value == "") {
        animate.changeSpeedAnimate(pwdText, { "top": -20 });
        animate.changeSpeedAnimate(this, { "opacity": 0.2 });
      }
    };
    loginBtn.onclick = function () {
      clearTimeout(shadeTime);
      var animate1 = { "top": -50, "opacity": 0 };
      animate.changeSpeedAnimate(interface, animate1);
      var animate2 = { "height": 1000, "width": 1000, "borderRadius": 900 };
      animate.changeSpeedAnimate(shade, animate2);
    };
  </script>
</body>

</html>